<template>
  <div>
    <h1>MarkdownRenderer 测试组件</h1>
    <MarkdownRenderer :markdown="markdownContent" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import MarkdownRenderer from '@/components/MarkdownRenderer/index.vue' // 确保路径正确

const markdownContent = ref<string>(`# 测试 MarkdownRenderer

这是一段普通文本，用于测试 Markdown 渲染效果。

## 1. 列表示例

- 苹果
- 香蕉
- 🍇 葡萄

## 2. Mermaid ER 图

\`\`\`mermaid
erDiagram
    Company ||--o{ MonitoringDeviceDetail : "拥有"

    Company {
        int company_id PK "企业ID"
        varchar company_name "企业名称"
        varchar address "地址"
    }

    MonitoringDeviceDetail {
        int company_id PK,FK "企业ID"
        varchar monitoring_item PK "监测项目"
        varchar device_model_serial_number "设备型号及出厂编号"
    }
\`\`\`

## 3. Chart.js 示例

\`\`\`html
<canvas data-chart='{
  "type": "bar",
  "data": {
    "labels": ["Red", "Blue", "Yellow"],
    "datasets": [{
      "label": "My Dataset",
      "data": [12, 19, 3],
      "backgroundColor": ["red", "blue", "yellow"]
    }]
  },
  "options": {
    "responsive": true,
    "plugins": {
      "legend": {"position": "top"},
      "title": {"display": true, "text": "Chart.js 示例"}
    }
  }
}'></canvas>
\`\`\`

## 4. ECharts 示例

\`\`\`html
<div data-echarts='{
  "title": {"text": "ECharts 示例"},
  "tooltip": {},
  "xAxis": {"data": ["A", "B", "C", "D", "E"]},
  "yAxis": {},
  "series": [{"name": "销量","type": "bar","data": [5, 20, 36, 10, 10]}]
}' style="height:300px;"></div>
\`\`\`

\`\`\`ts
function greet(name: string) {
  return \`Hello,world\`;
}
\`\`\`

`)
</script>
